<template>
    <div class="bigbox">
        <div class="toubu">
            <router-link to="/mine">&lt;</router-link>
        </div>
        <div class="box1">
            <!--背景-->
            <div class="beijing"></div>
        </div>
        <div class="logo">
            <img src="../../public/img/logo.png" alt="" width="100%">
        </div>
        <div class="box2">
            <form action="" method="get">
                <div class="ding1">
                    <i class="iconfont icon-yonghu1"></i><input v-model="namePhone" @blur="input1($event)" class="input1" type="text" name="txt" placeholder="请输入用户名" autofocus >
                    <p style="color:red">{{ts1}}</p>
                </div>
                <div class="ding2">
                    <i class="iconfont icon-mima"></i><input :type="type" v-model="mima" @blur="input2($event)" class="input2" name="pwd" placeholder="请输入密码" maxlength="6">
                    <p style="color:red">{{ts2}}</p>
                </div>
                <p><a href="">忘记密码？</a></p>
                <input @click="btn" class="three" type="button" value="登  录">
            </form>
        </div>
        <div class="box3">还不是会员？<router-link to="/register">立即注册</router-link></div>
        <!-- 登录成功提示框 -->
        <div class="tsk" v-bind:style="{ display: blockNone }">
            <p>登录成功！</p>
            <p>即将跳转首页</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .toubu{
        height: 50px;
        a{
            margin-left: 13px;
            font-size: 30px;
            font-family: cursive;
            color: #000;
        }
    }
    .box1{
        position: absolute;
        left: 0;
        right:0;
        bottom: 0;
        top: 0;
        /*background: url("../../public/img/beijing8.jpg");*/
        z-index: -1;
        .beijing{
            width: 100%;
            height: 100%;
            /*z-index: 1;*/
            background-image: linear-gradient(to bottom, #fff 30%, #999);
            opacity: 0.8;
        }
    }
    .logo{
        display: flex;
        justify-content: center;
        margin-top: 10px;
        img{
            width: 60%;
        }
    }
    .box2{
        margin: 32px 32px 22px;
        input{
            padding-left: 45px;
            font-size: 15px;
            width: 100%;
            height: 46px;
            border: none;
            border-bottom: 1px solid #666;
            outline: none;
            background: transparent;
        }
        p{
            font-size:16px ;
        }
      .ding1{
          position: relative;
          i{
              position: absolute;
              left: 8px;
              top: 5px;
              font-size: 25px;
          }
      }
        .ding2{
            margin-top: 15px;
            position: relative;
            i{
                position: absolute;
                left: 8px;
                top: 4px;
                font-size: 27px;
            }

        }
        .three{
            padding: 0;
            background: #333333;
            height: 50px;
            color: #ffffff;
            margin-top: 25px;
        }
        input::placeholder{
            color: #aaa;
        }
        p a{
            color: #aaa;
            float: right;
            padding: 2px 0;
            font-size: 12px;
        }
    }
    .box3{
        font-size: 14px;
        width: 100%;
        height: 180px;
        text-align: center;
        line-height: 260px;
        color: #666;
        a{
            text-decoration: underline;
            color: #fff;
        }
    }
    .tsk{
        width: 170px;
        height: 76px;
        line-height: 31px;
        text-align: center;
        background: #000;
        opacity: 0.5;
        color: #c2c5c9;
        font-size: 30px;
        border-radius: 6px;
        position: fixed;
        top: 50%;
        left: 50%;
        font-size: 20px;
        transform: translate(-50%, -50%);
    }
</style>

<script>
export default {
    data(){
        return {
            type:"password",  //密码input的type
            namePhone:'',//用户名或者手机号
            ts1:'',//用户名或者手机号提示
            ts2:"",//密码提示框
            mima:"" , //密码
            blockNone: "none",  //弹框显示隐藏
        }
    },
    methods:{
        //input 
        input1(e){
            if(e.target.value.trim()==''){
                this.ts1='用户名不能为空';
            }else{
                this.ts1=''; 
            }
        },
        //input2
        input2(e){
            if(e.target.value.trim()==''){
                this.ts2='密码不能为空';
            }else{
                this.ts2='';        
            }
        },
        //登录事件
        btn(){
            if(this.namePhone.trim()==''){
               this.ts1='用户名不能为空'; 
            }else{
                if(this.mima.trim()==''){
                    this.ts2='密码不能为空';
                }else{
                    // console.log(1111);
                    const obj={namePhone:this.namePhone,password:this.mima};
                    this.$axios.post('http://47.111.93.194:3003/login',obj).then((data)=>{
                        // console.log(data);
                        if(data.status==200){
                            if(data.data.code==200){
                                //可以登录
                                this.ts1='';
                                this.ts2='';
                                //把login.js传过来的数据存到本地
                                //console.log(data.data);
                                localStorage.setItem("user",JSON.stringify(data.data));
                                
                                //登录成功的时候 去存储
                                localStorage.setItem("biao1",JSON.stringify(data.data.list));


                                //登录成功提示框
                                this.blockNone = "block";
                                setTimeout(() => {
                          this.blockNone = "none";
                          this.$router.push({ path: "/" });//跳转到首页
                       }, 2000);
                            }else{
                                if(data.data.code==400){
                                    //用户名或手机号不正确
                                    this.ts1=data.data.msg;
                                }else if(data.data.code==401){
                                    //密码不正确
                                    this.ts2=data.data.msg; 
                                }
                            }
                        }
                    }).catch(function(err){
                        console.log(err);
                    })
                }
            }
            
        },
    },
    mounted(){

    }
}
</script>